<template>
  <div
    class="review-card relative flex flex-col rounded-2xl shadow-md overflow-hidden"
    :style="{ width: width + 'px', minHeight: minHeight + 'px' }"
  >
    <!-- 上半部分 -->
    <div
      v-if="styleType === 'split'"
      class="flex-1 relative px-6 py-4"
      :style="{ backgroundColor: topBg }"
    >
      <!-- 星星（右上角 or 顶部） -->
      <div
        v-if="showStars && starPosition === 'top-right'"
        class="absolute top-3 right-4 flex gap-1"
      >
        <i
          v-for="n in 5"
          :key="n"
          class="fas fa-star"
          :class="n <= rating ? 'text-yellow-400' : 'text-gray-300'"
        ></i>
      </div>

      <!-- 评价文字 -->
      <div class="review-text text-xl font-semibold leading-snug text-black">
        <p v-for="(line, idx) in textLines" :key="idx">{{ line }}</p>
      </div>
    </div>

    <!-- 下半部分（双色风格才需要） -->
    <div
      v-if="styleType === 'split'"
      class="flex-1 relative px-6 py-4"
      :style="{ backgroundColor: bottomBg }"
    >
      <div
        v-if="showAvatar"
        class="absolute -bottom-10 right-6 flex items-center justify-center rounded-full overflow-hidden"
        :style="{
          width: avatarSize + 'px',
          height: avatarSize + 'px',
          border: avatarBorderWidth + 'px solid ' + avatarBorderColor,
          backgroundColor: avatarBg
        }"
      >
        <span class="text-5xl">{{ avatar }}</span>
      </div>
    </div>

    <!-- 单色风格 -->
    <div
      v-else
      class="flex items-center justify-between flex-1 px-6 py-4"
      :style="{ backgroundColor: topBg }"
    >
      <div class="review-text text-2xl font-semibold leading-snug text-black">
        <p v-for="(line, idx) in textLines" :key="idx">{{ line }}</p>
      </div>

      <div
        v-if="showAvatar"
        class="ml-4 flex items-center justify-center rounded-full overflow-hidden"
        :style="{
          width: avatarSize + 'px',
          height: avatarSize + 'px',
          border: avatarBorderWidth + 'px solid ' + avatarBorderColor,
          backgroundColor: avatarBg
        }"
      >
        <span class="text-5xl">{{ avatar }}</span>
      </div>

      <div
        v-if="showStars && starPosition === 'bottom-left'"
        class="absolute bottom-3 left-6 flex gap-1"
      >
        <i
          v-for="n in 5"
          :key="n"
          class="fas fa-star"
          :class="n <= rating ? 'text-yellow-400' : 'text-gray-300'"
        ></i>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { computed } from "vue";

  const props = defineProps({
    text: { type: String, required: true }, // 评论内容
    rating: { type: Number, default: 5 }, // 星级数量
    showStars: { type: Boolean, default: true }, // 是否显示星星
    starPosition: { type: String, default: "bottom-left" }, // 星星位置: "top-right" | "bottom-left"

    styleType: { type: String, default: "single" }, // 风格: "single" 单色 / "split" 上下双色
    topBg: { type: String, default: "#a8e1c8" }, // 顶部背景色
    bottomBg: { type: String, default: "#fff" }, // 底部背景色

    showAvatar: { type: Boolean, default: true },
    avatar: { type: String, default: "🙂" }, // 可以是 emoji 或者 <img>
    avatarSize: { type: Number, default: 80 },
    avatarBg: { type: String, default: "#ddd" },
    avatarBorderColor: { type: String, default: "#fff" },
    avatarBorderWidth: { type: Number, default: 4 },

    width: { type: Number, default: 500 },
    minHeight: { type: Number, default: 200 }
  });

  const textLines = computed(() => props.text.split("\n"));
</script>

<style>
  .review-card .fa-star {
    font-size: 22px;
  }
</style>
